<template>
  <div class="pms-zr-tabs">
    <el-tabs v-model="activeName" v-loading="loading" type="border-card">
      <el-tab-pane label="物资绑定明细" name="material">
        <MaterialTabs v-if="!loading && activeName === 'material'" ref="materialTabs" :detail="detail" :prj-id="prjIds" />
      </el-tab-pane>
      <el-tab-pane label="服务绑定明细" name="service">
        <ServiceTabs v-if="!loading && activeName === 'service'" ref="serviceTabs" :detail="detail" :prj-id="prjIds" />
      </el-tab-pane>
      <el-tab-pane label="乙供物资明细" name="service2">
        <SupplyMaterialTabs
          v-if="!loading && activeName === 'service2'"
          :detail="detail"
          :prj-id="prjIdNew"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ServiceTabs from './serviceTabs.vue'
import SupplyMaterialTabs from './supplyMaterialTabs.vue'
import MaterialTabs from './materialTabs.vue'
import { getSiteListApi } from '@/api/acceptance'

export default {
  name: 'ShowMaterialService',
  components: { MaterialTabs, ServiceTabs, SupplyMaterialTabs },
  inject: ['prjDetail', 'workDetail'],
  data() {
    return {
      activeName: 'material',
      prjId: '',
      detail: false,
      subPrjIds: [],
      loading: false,
      prjIdNew: ''
    }
  },
  computed: {
    newPrjDetail() {
      return this.prjDetail()
    },
    newWorkDetail() {
      return this.workDetail()
    },
    prjIds() {
      return this.subPrjIds.join(',')
    }
  },
  created() {
    this.loading = true
    if (this.newPrjDetail.manageMode === '03') {
      this.detail = false
      this.prjId = this.newPrjDetail.prjId
      this.getSubPrjIds()
    }
     if (this.newPrjDetail.manageMode === '31') {
      this.detail = true
      this.prjId = this.newPrjDetail.parentPrjId
      this.subPrjIds = [this.newPrjDetail.prjId]
      this.loading = false
    }
      this.prjIdNew = this.newPrjDetail.prjId
  },
  methods: {
    async getSubPrjIds() {
      const params = {
        'prjId': this.newPrjDetail.prjId,
        'ifSingleProject': this.newPrjDetail.manageMode !== '03',
        'workItemId': this.newWorkDetail.workItemID,
        pageNum: 1,
        pageSize: 999
      }
      const result = await getSiteListApi(params)
      this.subPrjIds = result.data.rows.map(item => item.prjId)
      console.log(this.subPrjIds)
      this.loading = false
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped lang='scss'>
.foot-btn {
  text-align: center;
  margin-top: 20px;
}
</style>
